<!DOCTYPE html>
<html>
  <head>
    <link href="ui/theme/plus/jquery.ui.all.css?v=1" rel="stylesheet" type="text/css"/>
		<style type="text/css">
			*{font-family:Arial;font-size:12px;}
			body{background-color:#fff}
			html, body, {margin: 0;padding: 0;height: 100%;}
			#map{margin: 0;padding: 0;height: 600px;width:1000px;}
			.group{font-size:11px;border:solid 0px #ddd}
			#controles{position:absolute;top:5px;left:300px;z-Index:1000;}
			#msg{border:solid 1px #ddd; background-color:#FDF1BF;height:300px;overflow:auto;padding:5px;font-size:11px;color:#C02B55}
			.btn{cursor:pointer}
			input{width:100px;}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript" src="ui/js/map.js"></script>
    <script type="text/javascript" src="ui/js/mar.js"></script>
    <script type="text/javascript" src="ui/js/lobo-static-data.js"></script>

		<script type="text/javascript">
			var lobo1,lobo2,lobo3,lobo4,lobo5,lobo6,lobo7,lobo8;
		$(function(){
			$('input[type=button]').button();
			mapa.init();
			mar.limite();

			lobo1 = new lobo(1);
			lobo2 = new lobo(2);
			lobo3 = new lobo(3);
			lobo4 = new lobo(4);
			lobo5 = new lobo(5);
			lobo6 = new lobo(6);
			lobo7 = new lobo(7);
			lobo8 = new lobo(8);

			$('#lobo1').click(function(){lobo1.control();});
			$('#lobo2').click(function(){lobo2.control();});
			$('#lobo3').click(function(){lobo3.control();});
			$('#lobo4').click(function(){lobo4.control();});
			$('#lobo5').click(function(){lobo5.control();});
			$('#lobo6').click(function(){lobo6.control();});
			$('#lobo7').click(function(){lobo7.control();});
			$('#lobo8').click(function(){lobo8.control();});
		});
    </script>
	</head>
<body>
<h2>Chile es mar: Seguimiento lobos marinos via GPS</h2>
	<div id="controles" class="group">
			<div id="list" style="display:none;float:left" class="ui-state-error ui-corner-all"></div>
	</div>

	<div style="float:left;">
		<input type="button" id="lobo1" value="Lobo 1"><br/>
		<input type="button" id="lobo2" value="Lobo 2"><br/>
		<input type="button" id="lobo3" value="Lobo 3"><br/>
		<input type="button" id="lobo4" value="Lobo 4"><br/>
		<input type="button" id="lobo5" value="Lobo 5"><br/>
		<input type="button" id="lobo6" value="Lobo 6"><br/>
		<input type="button" id="lobo7" value="Lobo 7"><br/>
		<input type="button" id="lobo8" value="Lobo 8"><br/>
		<div id="loader" style="display:none;font-size:11px;border:solid 1px #ccc;text-align:center;background-color:#fafafa" class="ui-corner-all">Cargando datos<br/><img src="ui/i/ajaxLoadBigGrey.gif"></div>
	</div>

	<div style="float:left;">
		<div id="map"></div>
	</div>

	<div id="msg" style="display:none;float:left" class="ui-state-error ui-corner-all"><span id="msg-text"></span></div>

</body>
</html>